<template>
    <!-- :before-close="handleClose" -->
    <el-drawer v-model="drawerVisible" :direction="direction" size="50%">
        <template #header>
            <h4>{{ drawerTitle }}</h4>
        </template>
        <template #default>
            <div>
                <el-table stripe border :data="catalogSortList" :size="$store.getters.size" style="width: 100%;height: 88vh;">
                    <!-- 序号 -->
                    <el-table-column align="center" type="index" width="50" />
                    <el-table-column
                        header-align="center"
                        :width="item.width"
                        :align="item.align"
                        :prop="item.prop"
                        :label="$t(`table.${item.label}`)"
                        v-for="(item, index) in catalogSorts"
                        :key="index"
                    >
                    <!-- 是否关联 -->
                    <template v-slot="{ row }" align="center" v-if="item.prop === 'is_relevance'">
                        <el-switch
                            :active-value="1"
                            :inactive-value="0"
                            v-model="row.is_relevance"
                            :size="$store.getters.size"
                            disabled
                        />
                    </template>
                    <!-- 操作 -->
                    <!-- <template v-slot="{ row, index }" v-else-if="item.prop === 'action'"> -->
                    <template #default="scope" v-else-if="item.prop === 'action'">
                        <el-button
                            v-if="!scope.row.is_relevance"
                            type="success"
                            :icon="Connection"
                            :size="$store.getters.size"
                            @click="addAssociatedData(scope.row, scope.$index)"
                        >{{ $t('btn.association') }}</el-button>
                        <el-button
                            v-else
                            type="danger"
                            :icon="Delete"
                            :size="$store.getters.size"
                            @click="delAssociatedData(scope.row, scope.$index)"
                        >{{ $t('btn.delete') }}</el-button>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { ref } from 'vue'
import { Connection, Delete } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { catalogSorts } from './catalog_sort.js'
import { getcatalogSortList, addCatalogSort, deleteCatalogSort } from '@/api/catalog.js'
import dayjs from 'dayjs'
import { useI18n } from 'vue-i18n'
const i18n = useI18n()

// 父组件传参
const props = defineProps({
    drawerTitle: {
        type: String,
        default: '',
        required: true
    },
    catalogId: {
        type: Number,
        default: null,
        required: true
    }
})

// 是否显示抽屉
const drawerVisible = ref(false)
// Drawer 打开的方向
const direction = ref('rtl')
const catalogSortList = ref([])

// 加载关联数据
const initcatalogSortList =  async () => {
    const res = await getcatalogSortList(props.catalogId)
    catalogSortList.value = JSON.parse(JSON.stringify(res.data))
}
initcatalogSortList()

// 关闭前提示
// const handleClose = (done) => {
//   ElMessageBox.confirm(i18n.t('dialog.closeDrawer'), {
//     confirmButtonText: i18n.t('dialog.OK'), // OK
//     cancelButtonText: i18n.t('dialog.Cancel'), // Cancel
//     type: 'warning'
//   })
//     .then(() => {
//       done()
//     })
//     .catch(() => {
//       // catch error
//       console.log('取消关闭');
//     })
// }

// 新增关联
const addAssociatedData = async (row, index) => {
    let catalogSort = {
        catalog_id: props.catalogId,
        sort_id: row.id,
        create_time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        is_delete: 0
    }
    const res = await addCatalogSort([catalogSort])
    ElMessage({
        type: res.status === 0 ? 'success' : 'error',
        message:
        res.status === 0
            ? i18n.t('message.associationSuccess')
            : i18n.t('message.associationFailed')
      })
      res.status === 0 && ( catalogSortList.value[index].is_relevance = 1 )
}

// 删除关联
const delAssociatedData = async (row, index) => {
    const res = await deleteCatalogSort(row.sort_id, row.tag_id)
    ElMessage({
        type: res.status === 0 ? 'success' : 'error',
        message:
        res.status === 0
            ? i18n.t('message.deleteSuccess')
            : i18n.t('message.deleteFailed')
      })
      res.status === 0 && ( catalogSortList.value[index].is_relevance = 0 )
}

</script>

<style lang="scss" scoped>
</style>